<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>LS.GUI</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="icon" href="../assets/favicon.ico">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title="" width="117" height="52"></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
                    <h2 class="off-left">APIs</h2>
                    <div id="api-tabview" class="tabview">
                        <ul class="tabs">
                            <li><a href="#api-classes">Classes</a></li>
                            <li><a href="#api-modules">Modules</a></li>
                        </ul>
                
                        <div id="api-tabview-filter">
                            <input type="search" id="api-filter" placeholder="Type to filter APIs">
                        </div>
                
                        <div id="api-tabview-panel">
                            <ul id="api-classes" class="apis classes">
                                <li><a href="../classes/LS.Animation.html">LS.Animation</a></li>
                                <li><a href="../classes/LS.Animation.Take.html">LS.Animation.Take</a></li>
                                <li><a href="../classes/LS.Animation.Track.html">LS.Animation.Track</a></li>
                                <li><a href="../classes/LS.BaseComponent.html">LS.BaseComponent</a></li>
                                <li><a href="../classes/LS.Collision.html">LS.Collision</a></li>
                                <li><a href="../classes/LS.ComponentContainer.html">LS.ComponentContainer</a></li>
                                <li><a href="../classes/LS.Components.Camera.html">LS.Components.Camera</a></li>
                                <li><a href="../classes/LS.Components.CameraController.html">LS.Components.CameraController</a></li>
                                <li><a href="../classes/LS.Components.CameraDirector.html">LS.Components.CameraDirector</a></li>
                                <li><a href="../classes/LS.Components.CameraFX.html">LS.Components.CameraFX</a></li>
                                <li><a href="../classes/LS.Components.Canvas3D.html">LS.Components.Canvas3D</a></li>
                                <li><a href="../classes/LS.Components.CustomData.html">LS.Components.CustomData</a></li>
                                <li><a href="../classes/LS.Components.FollowNode.html">LS.Components.FollowNode</a></li>
                                <li><a href="../classes/LS.Components.FrameFX.html">LS.Components.FrameFX</a></li>
                                <li><a href="../classes/LS.Components.FXGraphComponent.html">LS.Components.FXGraphComponent</a></li>
                                <li><a href="../classes/LS.Components.FXStack.html">LS.Components.FXStack</a></li>
                                <li><a href="../classes/LS.Components.GeometricPrimitive.html">LS.Components.GeometricPrimitive</a></li>
                                <li><a href="../classes/LS.Components.GraphComponent.html">LS.Components.GraphComponent</a></li>
                                <li><a href="../classes/LS.Components.Light.html">LS.Components.Light</a></li>
                                <li><a href="../classes/LS.Components.LightFX.html">LS.Components.LightFX</a></li>
                                <li><a href="../classes/LS.Components.LinesRenderer.html">LS.Components.LinesRenderer</a></li>
                                <li><a href="../classes/LS.Components.MeshRenderer.html">LS.Components.MeshRenderer</a></li>
                                <li><a href="../classes/LS.Components.NodeManipulator.html">LS.Components.NodeManipulator</a></li>
                                <li><a href="../classes/LS.Components.ParticlesEmissor.html">LS.Components.ParticlesEmissor</a></li>
                                <li><a href="../classes/LS.Components.PlayAnimation.html">LS.Components.PlayAnimation</a></li>
                                <li><a href="../classes/LS.Components.Poser.html">LS.Components.Poser</a></li>
                                <li><a href="../classes/LS.Components.RealtimeReflector.html">LS.Components.RealtimeReflector</a></li>
                                <li><a href="../classes/LS.Components.Rotator.html">LS.Components.Rotator</a></li>
                                <li><a href="../classes/LS.Components.SceneInclude.html">LS.Components.SceneInclude</a></li>
                                <li><a href="../classes/LS.Components.Script.html">LS.Components.Script</a></li>
                                <li><a href="../classes/LS.Components.SkinDeformer.html">LS.Components.SkinDeformer</a></li>
                                <li><a href="../classes/LS.Components.Skybox.html">LS.Components.Skybox</a></li>
                                <li><a href="../classes/LS.Components.Spline.html">LS.Components.Spline</a></li>
                                <li><a href="../classes/LS.Components.SVGRenderer.html">LS.Components.SVGRenderer</a></li>
                                <li><a href="../classes/LS.Components.Target.html">LS.Components.Target</a></li>
                                <li><a href="../classes/LS.Components.Transform.html">LS.Components.Transform</a></li>
                                <li><a href="../classes/LS.Components.VRCameraController.html">LS.Components.VRCameraController</a></li>
                                <li><a href="../classes/LS.CompositePattern.html">LS.CompositePattern</a></li>
                                <li><a href="../classes/LS.DebugRender.html">LS.DebugRender</a></li>
                                <li><a href="../classes/LS.Draw.html">LS.Draw</a></li>
                                <li><a href="../classes/LS.Formats.html">LS.Formats</a></li>
                                <li><a href="../classes/LS.GLSLCode.html">LS.GLSLCode</a></li>
                                <li><a href="../classes/LS.GraphCode.html">LS.GraphCode</a></li>
                                <li><a href="../classes/LS.GUI.html">LS.GUI</a></li>
                                <li><a href="../classes/LS.Input.html">LS.Input</a></li>
                                <li><a href="../classes/LS.InteractiveController.html">LS.InteractiveController</a></li>
                                <li><a href="../classes/LS.Knob.html">LS.Knob</a></li>
                                <li><a href="../classes/LS.LS.html">LS.LS</a></li>
                                <li><a href="../classes/LS.LScript.html">LS.LScript</a></li>
                                <li><a href="../classes/LS.Material.html">LS.Material</a></li>
                                <li><a href="../classes/LS.oldStandardMaterial.html">LS.oldStandardMaterial</a></li>
                                <li><a href="../classes/LS.Pack.html">LS.Pack</a></li>
                                <li><a href="../classes/LS.Particle.html">LS.Particle</a></li>
                                <li><a href="../classes/LS.Physics.html">LS.Physics</a></li>
                                <li><a href="../classes/LS.PhysicsInstance.html">LS.PhysicsInstance</a></li>
                                <li><a href="../classes/LS.Picking.html">LS.Picking</a></li>
                                <li><a href="../classes/LS.Player.html">LS.Player</a></li>
                                <li><a href="../classes/LS.Prefab.html">LS.Prefab</a></li>
                                <li><a href="../classes/LS.Project.html">LS.Project</a></li>
                                <li><a href="../classes/LS.Ray.html">LS.Ray</a></li>
                                <li><a href="../classes/LS.Renderer.html">LS.Renderer</a></li>
                                <li><a href="../classes/LS.RenderFrameContext.html">LS.RenderFrameContext</a></li>
                                <li><a href="../classes/LS.RenderInstance.html">LS.RenderInstance</a></li>
                                <li><a href="../classes/LS.RenderSettings.html">LS.RenderSettings</a></li>
                                <li><a href="../classes/LS.RenderState.html">LS.RenderState</a></li>
                                <li><a href="../classes/LS.Resource.html">LS.Resource</a></li>
                                <li><a href="../classes/LS.ResourcesManager.html">LS.ResourcesManager</a></li>
                                <li><a href="../classes/LS.Scene.html">LS.Scene</a></li>
                                <li><a href="../classes/LS.SceneNode.html">LS.SceneNode</a></li>
                                <li><a href="../classes/LS.ShaderBlock.html">LS.ShaderBlock</a></li>
                                <li><a href="../classes/LS.ShaderCode.html">LS.ShaderCode</a></li>
                                <li><a href="../classes/LS.ShaderGraph.html">LS.ShaderGraph</a></li>
                                <li><a href="../classes/LS.ShaderMaterial.html">LS.ShaderMaterial</a></li>
                                <li><a href="../classes/LS.Shaders.html">LS.Shaders</a></li>
                                <li><a href="../classes/LS.SpatialContainer.html">LS.SpatialContainer</a></li>
                                <li><a href="../classes/LS.StandardMaterial.html">LS.StandardMaterial</a></li>
                                <li><a href="../classes/LS.Tween.html">LS.Tween</a></li>
                                <li><a href="../classes/LS.UnityMaterial.html">LS.UnityMaterial</a></li>
                                <li><a href="../classes/LS.WBin.html">LS.WBin</a></li>
                                <li><a href="../classes/LSQ.html">LSQ</a></li>
                            </ul>
                
                
                            <ul id="api-modules" class="apis modules">
                                <li><a href="../modules/LS.html">LS</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
                    Show:
                    <label for="api-show-inherited">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </div>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
<h1>LS.GUI Class</h1>
<div class="box meta">


        <div class="foundat">
            Defined in: <a href="../files/.._src_gui.js.html#l2"><code>..&#x2F;src&#x2F;gui.js:2</code></a>
        </div>

            Module: <a href="../modules/LS.html">LS</a>

</div>


<div class="box intro">
    <p>GUI is a static class used to create two kinds of GUIs: HTML GUIs on top of the 3D Canvas (in a safe way) or Immediate GUI using a Canvas2D (fast gui)
For HTML GUIs check the getHTMLRoot function.
For Immediate GUIs check the Box,Button,Toggle,Textfield,HorizontalSlider,VerticalSlider and Toolbar.
To change colors of the immediate GUI check the LS.GUI.GUIStyle</p>

</div>

    <div class="constructor">
        <h2>Constructor</h2>
<div id="method_LS.GUI" class="method item">
    <h3 class="name"><code>LS.GUI</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l2"><code>..&#x2F;src&#x2F;gui.js:2</code></a>
        </p>



    </div>

    <div class="description">
        
    </div>




</div>
    </div>

<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

                <div class="index-section methods">
                    <h3>Methods</h3>

                    <ul class="index-list methods">
                            <li class="index-item method">
                                <a href="#method_attach">attach</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Box">Box</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Button">Button</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_createElement">createElement</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_detach">detach</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_getHTMLRoot">getHTMLRoot</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_hideHTML">hideHTML</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_HorizontalSlider">HorizontalSlider</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Knob">Knob</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Label">Label</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_loadHTML">loadHTML</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_reset">reset</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_ResetImmediateGUI">ResetImmediateGUI</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_showHTML">showHTML</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_TextField">TextField</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Toggle">Toggle</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_Toolbar">Toolbar</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_VerticalSlider">VerticalSlider</a>

                            </li>
                    </ul>
                </div>



        </div>

            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>

<div id="method_attach" class="method item">
    <h3 class="name"><code>attach</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>element</code>
                </li>
                <li class="arg">
                        <code>anchor</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l108"><code>..&#x2F;src&#x2F;gui.js:108</code></a>
        </p>



    </div>

    <div class="description">
        <p>attach HTMLElement to HTML GUI Root in the anchor position specified</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">element</code>
                        <span class="type">HTMLElement</span>


                    <div class="param-description">
                         
                    </div>

                </li>
                <li class="param">
                        <code class="param-name">anchor</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>&quot;top-left&quot;, &quot;top-right&quot;, &quot;bottom-left&quot;, &quot;bottom-right&quot; or &quot;none&quot;</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_Box" class="method item">
    <h3 class="name"><code>Box</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>color</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l344"><code>..&#x2F;src&#x2F;gui.js:344</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders an immediate gui BOX, used as background</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">color</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>a color in string format &quot;#AFAFAF&quot;</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_Button" class="method item">
    <h3 class="name"><code>Button</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>content</code>
                </li>
                <li class="arg">
                        <code>content_over</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l403"><code>..&#x2F;src&#x2F;gui.js:403</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders a Button and returns if the button was pressed</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content</code>
                        <span class="type">String | GL.Texture</span>


                    <div class="param-description">
                        <p>could be a string or a GL.Texture (if null the button will be invisible)</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content_over</code>
                        <span class="type">String | GL.Texture</span>


                    <div class="param-description">
                        <p>same as before but in case the mouse is over</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Boolean</span>:
                    <p>true if the button was pressed</p>

            </div>
        </div>


</div>
<div id="method_createElement" class="method item">
    <h3 class="name"><code>createElement</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>tag_type</code>
                </li>
                <li class="arg">
                        <code>anchor</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">HTMLElement</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l91"><code>..&#x2F;src&#x2F;gui.js:91</code></a>
        </p>



    </div>

    <div class="description">
        <p>Creates a HTMLElement of the tag_type and adds it to the DOM on top of the canvas</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">tag_type</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>the tag type &quot;div&quot;</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">anchor</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>&quot;top-left&quot;, &quot;top-right&quot;, &quot;bottom-left&quot;, &quot;bottom-right&quot; or &quot;none&quot;</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">HTMLElement</span>:
            </div>
        </div>


</div>
<div id="method_detach" class="method item">
    <h3 class="name"><code>detach</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>element</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l169"><code>..&#x2F;src&#x2F;gui.js:169</code></a>
        </p>



    </div>

    <div class="description">
        <p>Removes an element from the GUI (same as  element.parentNode.removeChild( element ); )</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">element</code>
                        <span class="type">HTMLElement</span>


                    <div class="param-description">
                        <p>HTML element to detach from the GUI</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_getHTMLRoot" class="method item">
    <h3 class="name"><code>getHTMLRoot</code></h3>

        <span class="paren">()</span>

        <span class="returns-inline">
            <span class="type">HTMLElement</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l41"><code>..&#x2F;src&#x2F;gui.js:41</code></a>
        </p>



    </div>

    <div class="description">
        <p>Returns the DOM element responsible for the HTML GUI of the app. This is helpful because this GUI will be automatically removed if the app finishes.
Any HTML must be attached to this element, otherwise it may have problems with the editor.</p>

    </div>


        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">HTMLElement</span>:
            </div>
        </div>


</div>
<div id="method_hideHTML" class="method item">
    <h3 class="name"><code>hideHTML</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l216"><code>..&#x2F;src&#x2F;gui.js:216</code></a>
        </p>



    </div>

    <div class="description">
        <p>hides the HTML GUI (but it is still existing)</p>

    </div>




</div>
<div id="method_HorizontalSlider" class="method item">
    <h3 class="name"><code>HorizontalSlider</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>value</code>
                </li>
                <li class="arg">
                        <code>left_value</code>
                </li>
                <li class="arg">
                        <code>right_value</code>
                </li>
                <li class="arg">
                        <code>show_value</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Number</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l708"><code>..&#x2F;src&#x2F;gui.js:708</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders an horizontal slider widget, returns the current value
Remember: you must pass as value the same value returned by this function in order to work propertly</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the value to show in the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">left_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the minimum value for the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">right_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the maximum value for the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">show_value</code>
                        <span class="type">Boolean</span>


                    <div class="param-description">
                        <p>if you want to see a caption in text format with the value</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Number</span>:
                    <p>the current value of the slider (will be different from value if it was clicked)</p>

            </div>
        </div>


</div>
<div id="method_Knob" class="method item">
    <h3 class="name"><code>Knob</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>value</code>
                </li>
                <li class="arg">
                        <code>bottom_value</code>
                </li>
                <li class="arg">
                        <code>top_value</code>
                </li>
                <li class="arg">
                        <code>steps</code>
                </li>
                <li class="arg">
                        <code>content</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Number</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l845"><code>..&#x2F;src&#x2F;gui.js:845</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders an knob slider widget, returns the current value
Remember: you must pass as value the same value returned by this function in order to work propertly</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the value to show in the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">bottom_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the minimum value for the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">top_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the maximum value for the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">steps</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>[optional] the numeber of steps (if 0 then infinite)</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content</code>
                        <span class="type">Image | GL.Texture</span>


                    <div class="param-description">
                        <p>[optional] a texture or image to use as the knob</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Number</span>:
                    <p>the current value of the slider (will be different from value if it was clicked)</p>

            </div>
        </div>


</div>
<div id="method_Label" class="method item">
    <h3 class="name"><code>Label</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>content</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l362"><code>..&#x2F;src&#x2F;gui.js:362</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders a text (or a texture)</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content</code>
                        <span class="type">String | GL.Texture</span>


                    <div class="param-description">
                        <p>could be a string or a GL.Texture</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_loadHTML" class="method item">
    <h3 class="name"><code>loadHTML</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>url</code>
                </li>
                <li class="arg">
                        <code>on_complete</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l228"><code>..&#x2F;src&#x2F;gui.js:228</code></a>
        </p>



    </div>

    <div class="description">
        <p>Loads resource containing the HTML code for the GUI and attachs it inside a div to the hud</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">url</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>the url of the resource containing all the HTML code</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">on_complete</code>
                        <span class="type">Function</span>


                    <div class="param-description">
                        <p>callback that will be called once the HTML has been loaded and attached to the doom, it receives the HTMLElement containing all the HTML</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_reset" class="method item">
    <h3 class="name"><code>reset</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l181"><code>..&#x2F;src&#x2F;gui.js:181</code></a>
        </p>



    </div>

    <div class="description">
        <p>Removes all the GUI elements from the DOM</p>

    </div>




</div>
<div id="method_ResetImmediateGUI" class="method item">
    <h3 class="name"><code>ResetImmediateGUI</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l285"><code>..&#x2F;src&#x2F;gui.js:285</code></a>
        </p>



    </div>

    <div class="description">
        <p>Called by the LS.Renderer to clear intermediate stuff</p>

    </div>




</div>
<div id="method_showHTML" class="method item">
    <h3 class="name"><code>showHTML</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l203"><code>..&#x2F;src&#x2F;gui.js:203</code></a>
        </p>



    </div>

    <div class="description">
        <p>shows the HTML GUI</p>

    </div>




</div>
<div id="method_TextField" class="method item">
    <h3 class="name"><code>TextField</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>text</code>
                </li>
                <li class="arg">
                        <code>max_length</code>
                </li>
                <li class="arg">
                        <code>is_password</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l608"><code>..&#x2F;src&#x2F;gui.js:608</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders a textfield widget and returns the current text value
Remember: you must pass as text the same text returned by this function in order to work propertly</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">text</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>the text to show in the textfield</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">max_length</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>to limit the text, otherwise leave blank</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">is_password</code>
                        <span class="type">Boolean</span>


                    <div class="param-description">
                        <p>set to true to show as password</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Boolean</span>:
                    <p>the current state of the checkbox (will be different from value if it was pressed)</p>

            </div>
        </div>


</div>
<div id="method_Toggle" class="method item">
    <h3 class="name"><code>Toggle</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>value</code>
                </li>
                <li class="arg">
                        <code>content</code>
                </li>
                <li class="arg">
                        <code>content_off</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l543"><code>..&#x2F;src&#x2F;gui.js:543</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders a checkbox widget, and returns the current state
Remember: you must pass as value the same value returned by this function in order to work propertly</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">value</code>
                        <span class="type">Boolean</span>


                    <div class="param-description">
                        <p>if the checkbox is on or off</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content</code>
                        <span class="type">String | GL.Texture</span>


                    <div class="param-description">
                        <p>an string or image in case the checkbox is on</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">content_off</code>
                        <span class="type">String | GL.Texture</span>


                    <div class="param-description">
                        <p>an string or image in case the checkbox is off</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Boolean</span>:
                    <p>the current state of the checkbox (will be different from value if it was pressed)</p>

            </div>
        </div>


</div>
<div id="method_Toolbar" class="method item">
    <h3 class="name"><code>Toolbar</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>selected</code>
                </li>
                <li class="arg">
                        <code>options</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Number</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l462"><code>..&#x2F;src&#x2F;gui.js:462</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders a Toolbar (list of buttons) and returns the active one</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">selected</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the index of the selected option</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">options</code>
                        <span class="type">ArrayString | GL.Texture</span>


                    <div class="param-description">
                        <p>an array containing either strings or GL.Texture</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Number</span>:
                    <p>the selected index</p>

            </div>
        </div>


</div>
<div id="method_VerticalSlider" class="method item">
    <h3 class="name"><code>VerticalSlider</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>area</code>
                </li>
                <li class="arg">
                        <code>value</code>
                </li>
                <li class="arg">
                        <code>bottom_value</code>
                </li>
                <li class="arg">
                        <code>top_value</code>
                </li>
            </ul><span class="paren">)</span>
        </div>

        <span class="returns-inline">
            <span class="type">Number</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_gui.js.html#l780"><code>..&#x2F;src&#x2F;gui.js:780</code></a>
        </p>



    </div>

    <div class="description">
        <p>Renders an vertical slider widget, returns the current value
Remember: you must pass as value the same value returned by this function in order to work propertly</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">area</code>
                        <span class="type">Array</span>


                    <div class="param-description">
                        <p>[x,y,width,height]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the value to show in the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">bottom_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the minimum value for the slider</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">top_value</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the maximum value for the slider</p>

                    </div>

                </li>
            </ul>
        </div>

        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Number</span>:
                    <p>the current value of the slider (will be different from value if it was clicked)</p>

            </div>
        </div>


</div>
            </div>



    </div>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
